<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${title}品牌`,
			size: '30%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="品牌名称" prop="bra_name">
								<el-input v-model="form.bra_name" placeholder="请填写品牌名称" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="负责人" prop="bra_contact">
								<el-input
									v-model="form.bra_contact"
									placeholder="请填写负责人名称"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="联系电话" prop="bra_mobile">
								<el-input
									v-model="form.bra_mobile"
									placeholder="请填写联系电话"
									maxlength="11"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="投入资金（￥）" prop="investment">
								<el-input
									v-model="form.investment"
									placeholder="请输入投入资金"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									@blur="form.investment = $event.target.value"
								>
									<template slot="prepend">￥</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import { validate } from "@/utils/validate";
import { mapActions } from "vuex";

export default {
	name: "cl-brand-form",
	data() {
		return {
			editing: false,
			saving: false,
			form: {
				bra_id: undefined,
				bra_name: "",
				// biz_id: "",
				bra_contact: "",
				bra_mobile: "",
				investment: ""
			},
			rules: {
				bra_name: [{ required: true, message: "请填写品牌名称" }],
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_mobile: [
					{ pattern: validate.mobile, message: "联系电话格式不正确" }
				]
			},
			type: "add",
			tagList: []
		};
	},
	computed: {
		title() {
			let title = "";
			switch (this.type) {
				case "add":
					title = "新增";
					break;
				case "edit":
					title = "修改";
					break;
				case "copy":
					title = "复制";
					break;
			}
			return title;
		}
	},
	created() {
		// 	this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		...mapActions("common", ["getBrands"]),
		open(type = "add", data = {}) {
			this.$refs.drawer.create(() => {
				this.reset();
				this.type = type;
				this.getTagList(data)
				if (type == "add") return;

				Object.keys(this.form).forEach((key) => {
					this.form[key] = data[key] ?? "";
				});

				if (data.base_mobile == "MA==") return;
				this.form.bra_mobile = atob(data.base_mobile ?? "");
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { type } = this;
				let { bra_id, ...args } = this.form;
				let form = {
					...args
				};
				let editing = type == "edit";
				editing && (form.bra_id = bra_id);
				this.saving = true;
				await this.$service.brand[editing ? "update" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success(`操作成功`);
				this.$emit("confirm", editing ? false : true);
				this.close();
				if (editing) {
					await this.updateBraRefBiz(bra_id);
				}
				this.getBrands();
			});
		},
		async getTagList() {
			const form = {
				page: 1,
				type: 4,
				pageSize: 999
			}
			const { lists } = await this.$service.tag.lists(form)
			console.info("tagList", lists)

			this.tagList = lists
		}
	}
};
</script>
